<template>
  <div class="mainPageClass" style="height: 100%;background: #fff;">
    <div class="remoteBook">
      <img class="mainIcon" src="~@/assets/images/regmainbanner.png" alt="" />
    </div>
    <div class="myreserva myrever" @click="toReserval()">
      <span class="myText">网点预约</span>
      <img class="myImgClass" src="~@/assets/images/regmainNext.png" alt="" />
    </div>
    <div class="myreserva myHall" @click="toMap()">
      <span class="myText">网点查询</span>
      <img class="myImgClass" src="~@/assets/images/regmainNext.png" alt="" />
    </div>
    <div class="myreserva myOrder" @click="toMyReserval()">
      <span class="myText">我的预约</span>
      <img class="myImgClass" src="~@/assets/images/regmainNext.png" alt="" />
    </div>
  </div>
</template>
<script lang="ts">
import '../../style/reservaIndex_index.css';
import 'vant/lib/toast/style';
import 'vant/lib/dialog/style';
import { Toast, Dialog } from 'vant';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { cloudApi } from '@/api/indexApi';
import Header from '@/components/Header.vue';
Vue.use(Toast);
Vue.use(Dialog);
Component.registerHooks(['beforeRouteUpdate', 'beforeRouteLeave', 'beforeRouteLeave']);
@Component({
  components: { [Dialog.Component.name]: Dialog.Component,Header },
})
export default class MainPage extends Vue {
  appid: string = '';
  code: string = '';
  openId: string = '';
  unionId: string = '';
  isoneload: boolean = false;
  lat: any = 39.908024;
  lng: any = 116.397915; //定位失败时默认天安门
  longitude: any = '';
  latitude: any = '';
  beforeCreate(){
   
  }
  created() {
  document.title = '网点预约'
  
    var obj = {
      code: '',
      miniopenid:''
    };
    if (location.href.indexOf('?') > -1) {
      var params = location.href.split('?')[1];
      var pareamsArr = params.split('&');
      for (var i = 0; i < pareamsArr.length; i++) {
        var name = pareamsArr[i].split('=')[0] as string;
        obj[name] = pareamsArr[i].split('=')[1];
      }
    }
    if (obj.code) {
      sessionStorage.setItem('code', obj.code || '');
      this.code = obj.code;
    } else {
      this.code = sessionStorage.getItem('code') as string;
    }
    if (obj.miniopenid) {
      sessionStorage.setItem('miniopenid', obj.miniopenid || '');
    }
    var openid = sessionStorage.getItem('openId');
    if(openid){
      this.openId = openid;
    }
    var unionId = sessionStorage.getItem('unionId');
    if(unionId){
      this.unionId = unionId;
    }
    this.getSigna();
  }
  mounted(){
    if (window.history && window.history.pushState) {
      // 向历史记录中插入了当前页
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', this.goBack, false);
    }
  }
  destroyed () {
    window.removeEventListener('popstate', this.goBack, false);
  }
  goBack () {
    // window.history.back();
    if((window as any).wx.miniProgram){
      (window as any).wx.miniProgram.navigateBack({
        delta: history.length
      })
    }
  }
  getSigna() {
    var _this = this;
    cloudApi.getSignature({
      url: window.location.href,
    })
    .then((res: any) => {
      if (res.data) {
        _this.appid = res.data.appId;
        sessionStorage.setItem('appid', res.data.appId || '');
        if(res.data.unionid){
          _this.unionId = res.data.unionid;
          sessionStorage.setItem('unionId', res.data.unionid||'');
        }
        if(!_this.openId || !_this.unionId){
          _this.getUnionId();
        } else {
          _this.isOneLoad();
        }
      }
    });
  }
  getUnionId() {
    var _this = this;
    cloudApi
      .showInfo({
        address: location.href,
        app_id: _this.appid,
        code: _this.code,
      })
      .then(function(res: any) {
        if (res.data) {
          _this.openId = res.data.openId;
          sessionStorage.setItem('openId', res.data.openId || '');
          if(res.data.unionid){
            _this.unionId = res.data.unionid;
            sessionStorage.setItem('unionId', res.data.unionid || '');
          }else {
            _this.getUnionIdAndOpenId();
          }
          _this.isOneLoad();
        }
      });
  }
  getUnionIdAndOpenId(){
    var _this = this;
    cloudApi
      .getUnionIdAndOpenId({
        appid: _this.appid,
        code: _this.code,
      })
      .then(function(res: any) {
        if (res.data) {
          if(res.data.unionId){
            _this.unionId = res.data.unionId;
            sessionStorage.setItem('unionId', res.data.unionId||'');
          }
        }
      });
  }
  //是否是第一次进入
  isOneLoad() {
    var _this = this;
    cloudApi.isOneLoad({
      openId: this.openId,
    })
    .then(function(res: any) {
      if (res.data && res.data.code == '9999') {
        //是第一次进入
        _this.isoneload = true;
      }
    });
  }
  toReserval() {
    var _this = this;
    this.$router.push({
      path: 'reservaIndex',
      query: {
        code: _this.code,
        appid: _this.appid,
      },
    });
  }
  toMyReserval() {
    var _this = this;
    if (this.isoneload) {
      Dialog.alert({
        title: '温馨提示',
        message: '您还未预约，请前往预约',
      })
    } else {
      var _this = this;
      (window as any).wx.ready(function(res: any) {
            (window as any).wx.getLocation({
              type: 'gcj02',
              success: function(res: any) {
                _this.lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                _this.lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。

              },
              fail: function(res: any) {
                //定位失败
                _this.lat = _this.lat; 
                _this.lng = _this.lng
              },
              cancel: function(res: any) {
                //用户拒绝定位
                _this.lat = _this.lat; 
                _this.lng = _this.lng
              },
            });
          });
          (window as any).wx.error(function(res: any) {
            _this.lat = _this.lat; 
            _this.lng = _this.lng
          });
      this.$router.push({
        path: 'myAppoint',
        query: {
          longitude: _this.lng,
          latitude: _this.lat,
        }
      });
    }
  }
  toMap(){
    var _this = this;
    this.$router.push({
      path: 'reservaIndex',
      query: {
        type: 'map',
        code: _this.code,
        appid: _this.appid,
      },
    });
  }
}
</script>
<style lang="less">
html{
  height: 100%;
}
</style>
